/* eslint-disable no-console */
export class Pointer {
  element: HTMLElement
  constructor(options: any) {
    const username = options.username
    const avatar = options.avatar
    const wrapper = document.createElement('div')
    wrapper.style.position = 'absolute'
    wrapper.style.display = 'flex'
    wrapper.style.flexDirection = 'column'
    wrapper.style.alignItems = 'center'
    wrapper.style.justifyContent = 'center'
    wrapper.style.pointerEvents = 'none'
    const div = document.createElement('div')
    div.style.width = '50px'
    div.style.height = '50px'
    div.style.borderRadius = '50%'
    div.style.overflow = 'hidden'
    const img = document.createElement('img')
    img.src = avatar
    img.style.display = 'block'
    img.style.width = '100%'
    img.style.height = '100%'
    div.appendChild(img)
    const nameBox = document.createElement('div')
    nameBox.innerHTML = username
    nameBox.style.color = 'white'
    nameBox.style.padding = '3px'
    nameBox.style.backgroundColor = 'rgba(0,0,0,0.67)'
    wrapper.appendChild(div)
    wrapper.appendChild(nameBox)
    document.body.appendChild(wrapper)
    this.element = wrapper
  }

  updatePosition(data: any) {
    this.element.style.left = `${data.coord.left}px`
    this.element.style.top = `${data.coord.top}px`
  }

  dispose() {
    document.body.removeChild(this.element)
  }
}
